<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<jsp:include page="../base.jsp"></jsp:include>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="${ctx}/static/css/font.css" media="all">
  <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="${ctx}/static/zTree_v3/css/zTreeStyle/zTreeStyle.css">
  <script src="${ctx}/static/layui/layui.js"></script>
  <script type="text/javascript" src="${ctx}/static/zTree_v3/js/jquery-1.4.4.min.js"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md6" style="float: left;">
      <div class="layui-card">
        <div class="layui-card-header">角色信息</div>
        <div class="layui-card-body">
          <form class="layui-form layui-form-pane" action="" id="roleform">
        	<input hidden="true" name="id" value="${role.id}">
			  <div class="layui-form-item">
			    <label class="layui-form-label">角色简称</label>
			    <div class="layui-input-inline">
			      <input type="text" name="roleDesc" lay-verify="roleDesc" placeholder="请输入英文" autocomplete="off" class="layui-input" value="${role.roleDesc}">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">角色名称</label>
			    <div class="layui-input-inline">
			      <input type="text" name="roleName" lay-verify="roleName" placeholder="请输入中文" autocomplete="off" class="layui-input" value="${role.roleName}">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn" lay-submit="" id="saverole" lay-filter="roleSave">立即提交</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			  </div>
			</form>
        </div>
      </div>
    </div>
    <div class="layui-col-md6" style="float: right;min-width: 400px;max-width: 500px;">
      <div class="layui-card">
        <div class="layui-card-header">权限信息</div>
        <div class="layui-card-body">
         <div id="menuTrees" class="ztree"></div>
        </div>
      </div>
    </div>
  </div>
</div> 
          
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script src="${ctx}/static/zTree_v3/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
		var zTree;
        var setting = {
            data : {   
                simpleData : {
                    enable : true, //设置启用简单数据格式[{id, pId, name}, {id, pId, name}]   
		    idKey : "id",  //节点数据中保存唯一标识的属性名称
		    pIdKey : "pId",  //节点数据中保存其父节点唯一标识的属性名称
	            rootPId : null,  //根节点id
                    type: "type"
                }
            },
            check: {
                enable: true,   //true / false 分别表示 显示 / 不显示 复选框或单选框
		autoCheckTrigger: true,   //true / false 分别表示 触发 / 不触发 事件回调函数
		chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
		chkboxType: { "Y": "s", "N": "s" }   //勾选 checkbox 对于父子节点的关联关系
                /*
                    Y: 选择复选框时
                    N: 取消复选框选中
                    p: 父级
                    s: 子级
                */
            }
};

$(document).ready(function(){
	var url = "${ctx}/admin/role/getMenuTree?id=${id}";
	            $.getJSON(url,function(result){
	                // 访问zTree方法通过数据初始化节点信息
	                zTree=$.fn.zTree.init($("#menuTrees"),setting,result);
	             });
});
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //自定义验证规则
  form.verify({
	roleDesc: function(value){
      if(value.length > 6){
        return '不得多于6个字符';
      }
      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
          return '角色简称不能有特殊字符';
        }
        if(/(^\_)|(\__)|(\_+$)/.test(value)){
          return '角色简称首尾不能出现下划线\'_\'';
        }
    },
    roleName: function(value){
        if(value.length <2 || value.length >6){
            return '长度在2到6位';
          }
          if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
              return '角色名不能有特殊字符';
            }
            if(/(^\_)|(\__)|(\_+$)/.test(value)){
              return '角色名首尾不能出现下划线\'_\'';
            }
        }
  });
  
  //监听提交
   form.on('submit(roleSave)', function(data){
	  
	  var nodes = zTree.getCheckedNodes();
	  var formDatas = data.field;
	  var ids="";
	  for ( var i in nodes) {
		ids += nodes[i].id+","
	  }
	  formDatas.treeids = ids;
	  var url = "${ctx}/admin/role/save";
            $.post(url,formDatas,function(result){
				layer.msg(result.msg, {icon: 1});
				if(result.status){ //为真刷新表格
					setTimeout(function(){
						window.parent.layui.table.reload('rolePageList',{});
						window.parent.layer.closeAll();
					}, 1000 )
				}
            });

	return false;
  }); 
});
</script>

</body>
</html>